<template>
        <div style="background: linear-gradient(to bottom, #fbc2eb,white)">
          <h1>我的订单</h1>
          <div class="main">
            <div class="title">订单查询</div>
            <div class="search-bar">
              <el-input v-model="searchText" placeholder="请输入商品名称" class="searchText"></el-input>
              <el-button type="primary" @click="searchOrder">搜索</el-button>
            </div>
          </div>

          <el-table :data="orders" class="content">
            <el-table-column type="expand">
              <template #default="props">
                <div m="4" style="background: linear-gradient(to bottom, #FFFFCE, white);">
                  <p m="t-0 b-2">服务费: {{ props.row.serviceCharge }}</p>
                  <p m="t-0 b-2">折扣: {{ props.row.discount }}</p>
                  <p m="t-0 b-2">预约时间: {{ props.row.appointmentTime }}</p>
                  <p m="t-0 b-2">是否完成: {{ props.row.isCompleted ? "是" : "否" }}</p>
                  <p m="t-0 b-2">描述: {{ props.row.description }}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="订单编号" prop="id"></el-table-column>
            <el-table-column label="商品名称" prop="itemId"></el-table-column>
            <el-table-column label="商品数量" prop="number"></el-table-column>
            <el-table-column label="下单时间" prop="created"></el-table-column>
            <el-table-column label="订单总价" prop="totalCharge"></el-table-column>
            <el-table-column label="订单地址" prop="address"></el-table-column>
          </el-table>
        </div>
</template>

<script>
import {getAllOrderData} from "@/api/order";
import {getFlowerUserOrderByCurrentUser,getOrderPage} from "@/api/order";
// import orderSearch from "@/components/front/orderSearch";

export default {
  data() {
    return {
      orders: [],
      searchText:''
    };
  },
  methods: {
    fetchOrders(keyword) {
      getFlowerUserOrderByCurrentUser({current: 1,
        size: 20,
        itemId: keyword,
      })
          .then((response) => {
            console.log(response.data)
            this.orders = response.data.data;
            //console.log(this.orders);
          })
          .catch(error => {
            console.error('Failed to fetch orders:', error);
          });
    },
    searchOrder() {
      this.fetchOrders(this.searchText);
    }

  },
  mounted:function () {
    this.fetchOrders(this.searchText);

  },
};
</script>
<style scoped>
h1{
  font-family: 'Indie Flower', cursive;
  text-align: center;
  font-size: 40px;
}
p{
  font-size: 18px;
  font-family: 'Indie Flower', cursive;
  font-weight: bolder;
}
.search-bar {
  width: 300px;
  justify-content: flex-end;
  margin: 1%;
  display: flex;
}
.main{
  display: flex;
  /*justify-content: center;*/
  align-items: center;
  background: linear-gradient(181deg, #ffeee7, #fff1e300);
  /* flex-direction: column; */
  margin-top: 30px;
}
.title{
  width: 297px;
  color: #fff;
  font-family: fangsong;
  font-size: 40px;
  font-weight: bolder;
  margin-top: -0%;
  text-shadow: 3px -5px 2px #d06f3b;
  font-style: oblique;

}
.searchText {
  margin-right: 10px;
  width: 200px;

}
/* 我的订单头部CSS */
.order .order-header {
  height: 64px;
  border-bottom: 2px solid #ff6700;
  background-color: #fff;
  margin-bottom: 20px;
}
.order .order-header .order-header-content {
  width: 1225px;
  margin: 0 auto;
}
.order .order-header p {
  font-size: 28px;
  line-height: 58px;
  float: left;
  font-weight: normal;
  color: #424242;
}
/* 我的订单头部CSS END */
.content {
  width: 1225px;
  margin: 0 auto;
  background-color: #fff;
  margin-bottom: 50px;
}

.order .content ul {
  background-color: #fff;
  color: #424242;
  line-height: 85px;
}
/* 我的订单表头CSS */
.order .content ul .order-info {
  height: 60px;
  line-height: 60px;
  padding: 0 26px;
  color: #424242;
  border-bottom: 1px solid #ff6700;
}
.order .content ul .order-info .order-id {
  float: left;
  color: #ff6700;
}
.order .content ul .order-info .order-time {
  float: right;
}

.order .content ul .header {
  height: 85px;
  padding-right: 26px;
  color: #424242;
}
/* 我的订单表头CSS END */

/* 订单列表CSS */
.product-list {
  height: 850px;
  padding: 15px 26px 15px 0;
  border-top: 1px solid #e0e0e0;
}
.order .content ul .pro-img {
  float: left;
  height: 85px;
  width: 120px;
  padding-left: 80px;
}
.order .content ul .pro-img img {
  height: 80px;
  width: 80px;
}
.order .content ul .pro-name {
  float: left;
  width: 380px;
}
.order .content ul .pro-name a {
  color: #424242;
}
.order .content ul .pro-name a:hover {
  color: #ff6700;
}
.order .content ul .pro-price {
  float: left;
  width: 160px;
  padding-right: 18px;
  text-align: center;
}
.order .content ul .pro-num {
  float: left;
  width: 190px;
  text-align: center;
}
.order .content ul .pro-total {
  float: left;
  width: 160px;
  padding-right: 81px;
  text-align: right;
}
.order .content ul .pro-total-in {
  color: #ff6700;
}

.order .order-bar {
  width: 1185px;
  padding: 0 20px;
  border-top: 1px solid #ff6700;
  height: 50px;
  line-height: 50px;
  background-color: #fff;
}
.order .order-bar .order-bar-left {
  float: left;
}
.order .order-bar .order-bar-left .order-total {
  color: #757575;
}
.order .order-bar .order-bar-left .order-total-num {
  color: #ff6700;
}
.order .order-bar .order-bar-right {
  float: right;
}
.order .order-bar .order-bar-right .total-price-title {
  color: #ff6700;
  font-size: 14px;
}
.order .order-bar .order-bar-right .total-price {
  color: #ff6700;
  font-size: 30px;
}
/* 订单列表CSS END */

/* 订单为空的时候显示的内容CSS */
.order .order-empty {
  width: 1225px;
  margin: 0 auto;
}
.order .order-empty .empty {
  height: 300px;
  padding: 0 0 130px 558px;
  margin: 65px 0 0;
  /*background: url(../assets/imgs/cart-empty.png) no-repeat 124px 0;*/
  color: #b0b0b0;
  overflow: hidden;
}
.order .order-empty .empty h2 {
  margin: 70px 0 15px;
  font-size: 36px;
}
.order .order-empty .empty p {
  margin: 0 0 20px;
  font-size: 20px;
}
/* 订单为空的时候显示的内容CSS END */
</style>